<template>
  <div class="excel-list">
    <el-table
        :data='excelList'
        :show-header="false"
        stripe
        border
        :header-cell-style="{'text-align':'center','background-color':'#F5F7FA'}"
        :span-method="handlerSpanMethod">
      <el-table-column prop="column0"></el-table-column>
      <el-table-column prop="column1"></el-table-column>
      <el-table-column prop="column2"></el-table-column>
      <el-table-column prop="column3"></el-table-column>
      <el-table-column prop="column4"></el-table-column>
      <el-table-column prop="column5"></el-table-column>
      <el-table-column prop="column6"></el-table-column>
      <el-table-column prop="column7"></el-table-column>
      <el-table-column prop="column8"></el-table-column>
      <el-table-column prop="column9"></el-table-column>
      <el-table-column prop="column10"></el-table-column>
      <el-table-column prop="column11"></el-table-column>
      <el-table-column prop="column12"></el-table-column>
      <el-table-column prop="column13"></el-table-column>
      <el-table-column prop="column14"></el-table-column>
      <el-table-column prop="column15"></el-table-column>
      <el-table-column prop="column16"></el-table-column>
      <el-table-column prop="column17"></el-table-column>
      <el-table-column prop="column18"></el-table-column>
      <el-table-column prop="column19"></el-table-column>
      <el-table-column
          prop='remark'
          label='备注'
          align='center'>
      </el-table-column>
      <el-table-column
          prop='createTime'
          label='创建时间'
          sortable
          align='center'>
        <template v-slot="scope">
          {{ scope.row.createTime | dateTimeFilter }}
        </template>
      </el-table-column>
      <!--<el-table-column label='操作' align='center'>-->
      <!--  <template v-slot='scope'>-->
      <!--    <el-button-->
      <!--        :size="size"-->
      <!--        type='text'-->
      <!--        @click='handlerUpdate(scope.row.id)'>-->
      <!--      修改-->
      <!--    </el-button>-->
      <!--    <el-button-->
      <!--        :size="size"-->
      <!--        type='text'-->
      <!--        @click='handlerDelete(scope.row.id)'>-->
      <!--      删除-->
      <!--    </el-button>-->
      <!--  </template>-->
      <!--</el-table-column>-->
    </el-table>
  </div>
</template>

<script>
import EasyExcelApi from '@/apis/system/EasyExcelApi'
import ExcelExtraApi from '@/apis/system/ExcelExtraApi'

export default {
  name: 'ExcelList',
  props: {},
  data () {
    return {
      businessId: 4,
      excelList: [],
      extraList: [],
    }
  },
  computed: {},
  mounted () {
    this.handlerSelectExcelExtraList()
    this.handlerSelectExcelList()
  },
  methods: {
    /**
     * 查询Excel数据
     * @returns {Promise<void>}
     */
    async handlerSelectExcelList () {
      const { data } = await EasyExcelApi.selectExcelList(this.businessId)
      this.excelList = data || []
    },
    /**
     * 查询Excel合并单元格扩展信息
     * @returns {Promise<void>}
     */
    async handlerSelectExcelExtraList () {
      const { data } = await ExcelExtraApi.selectExcelExtraList(this.businessId)
      this.extraList = data || []
    },
    /**
     * 合并单元格处理
     * @param rowIndex
     * @param columnIndex
     */
    handlerSpanMethod ({ rowIndex, columnIndex }) {
      // 1.合并单元格
      let extra = this.extraList.filter(item => item.type === 'MERGE')
          .find(item => rowIndex === item.firstRowIndex && columnIndex === item.firstColumnIndex)
      console.log('extra', extra)
      if (extra) {
        return {
          rowspan: extra.lastRowIndex - extra.firstRowIndex + 1,
          colspan: extra.lastColumnIndex - extra.firstColumnIndex + 1
        }
      }

      // 2.被合并单元格占据的单元格
      extra = this.extraList.filter(item => item.type === 'MERGE')
          .find(item => {
            const firstRowIndex = item.firstRowIndex
            const lastRowIndex = item.lastRowIndex
            const firstColumnIndex = item.firstColumnIndex
            const lastColumnIndex = item.lastColumnIndex
            // [7,5] -[12,9]区域为合并单元格，那么出了[7,5]所在的单元格为：{ rowspan: 5, colspan: 6 },其他单元格都为[0,0]

            // 2.1开始合并单元格的那一行
            const flag1 = rowIndex === firstRowIndex && columnIndex > firstColumnIndex && columnIndex <= lastColumnIndex
            // 2.2合并单元格所在行的下面行
            const flag2 = rowIndex > firstRowIndex && rowIndex <= lastRowIndex
            const flag3 = columnIndex >= firstColumnIndex && columnIndex <= lastColumnIndex

            return flag1 || (flag2 && flag3)
          })
      if (extra) {
        return { rowspan: 0, colspan: 0 }
      }

      // 3.未被合并的单元格
      return { rowspan: 1, colspan: 1 }

    },
  }
}
</script>

<style lang="scss" scoped>
.excel-list {
  .el-table {
    width: 100% !important;
  }
}
</style>